<template>
  <div class="index">
    <div class="mask" @click="cancel" v-show="isshow"></div>
    <div class="head">
      <div class="h-head">
        <div class="left">
          <img src="../../assets/left.png" alt />
          <p>LK</p>
        </div>
        <div class="right">
          <img src="@/assets/ddd.png" class="dian" @click="showLj" alt />
           <transition name="fade">
          <div class="s_list" v-show="isshow">
            <div class="s_block">
              <img class="xt" src="@/assets/zz.png" alt="">
              <router-link to="/transfer">转账</router-link>
            </div>
            <div style="width:80px;background:#fff;height:1px"></div>
            <div class="s_block" @click="logout">
              <img class="xt" src="@/assets/logout.png" alt="">
              <span>退出</span>
            </div>
          </div>
           </transition>
        </div>
      </div>
      <div class="h-mid">
        <p>
          <span class="bts1">比特算力</span>
          <span class="bts2">1T起售</span>
        </p>
        <div class="my_income">
          <router-link to="/c_income">
            <span>我的收益</span>
            <img src="../../assets/right.png" alt />
          </router-link>
        </div>
      </div>
      <div class="h_bottom">
        <div class="b_list">
          <div class="xiaoyuan"></div>
          <span>期限灵活</span>
        </div>
        <div class="b_list">
          <div class="xiaoyuan"></div>
          <span>回本快</span>
        </div>
        <div class="b_list">
          <div class="xiaoyuan"></div>
          <span>费用低</span>
        </div>
      </div>
    </div>
    <div class="sl_list">
      <div class="sl_block" @click="$router.push('/power_detail')">
        <img class="ysy" src="@/assets/none.png" alt="">
        <div class="sl1">
          <div class="left">
            <span>永续</span>
            <div>
              <img src="@/assets/rxx.png" alt />
            </div>
          </div>
          <div class="right jz" style="text-align:right">
            <span class="ll1" style="font-weight: bold!important;">22.22</span>
            <span class="ll2">USDT</span>
          </div>
        </div>
        <div class="sl2">
          <span class="g_color">算力周期</span>
          <span style="text-align:right" class="ll2 jz g_color">单价&nbsp;≈&nbsp;¥&nbsp;123</span>
        </div>
        <div class="sl3">
          <span class="jj1">
            <span style="font-size:10px;padding-right:2px">¥</span>0.38
          </span>
          <span class="jj2">33%</span>
          <span class="jj3"> <span style="font-size:10px;padding-right:2px">¥</span>33</span>
          <span class="tt jj4" style="text-align:right">
            434
            <span style="font-size:10px">天</span>
          </span>
        </div>
        <div class="sl4">
          <span class="g_color jj1">电费/度</span>
          <span class="g_color jj2">管理费</span>
          <span class="g_color jj3">运维费/度</span>
          <span class="tt jz g_color jj4" style="text-align:right">静态回本天数</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span style="width:0"></span>
          </div>
          <!-- <div class="right jz g_color" style="text-align:right">已售：30.62%</div> -->
        </div>
        <div class="sl6">BTC-S15云算力&nbsp;即买即挖</div>
      </div>
      <div class="sl_block" @click="$router.push('/power_detail')">
        <div class="sl1">
          <div class="left">
            <span>永续</span>
            <div>
              <img src="@/assets/rxx.png" alt />
            </div>
          </div>
          <div class="right jz" style="text-align:right">
            <span class="ll1" style="font-weight: bold!important;">22.22</span>
            <span class="ll2">USDT</span>
          </div>
        </div>
        <div class="sl2">
          <span class="g_color">算力周期</span>
          <span style="text-align:right" class="ll2 jz g_color">单价&nbsp;≈&nbsp;¥&nbsp;123</span>
        </div>
        <div class="sl3">
          <span class="jj1">
            <span style="font-size:10px;padding-right:2px">¥</span>0.38
          </span>
          <span class="jj2">33%</span>
          <span class="jj3"> <span style="font-size:10px;padding-right:2px">¥</span>33</span>
          <span class="tt jj4" style="text-align:right">
            434
            <span style="font-size:10px">天</span>
          </span>
        </div>
        <div class="sl4">
          <span class="g_color jj1">电费/度</span>
          <span class="g_color jj2">管理费</span>
          <span class="g_color jj3">运维费/度</span>
          <span class="tt jz g_color jj4" style="text-align:right">静态回本天数</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span></span>
          </div>
          <div class="right jz" style="text-align:right;color:#434343">已售：30.62%</div>
        </div>
        <div class="sl6">BTC-S15云算力&nbsp;即买即挖</div>
      </div>
      <div class="sl_block" @click="$router.push('/power_detail')">
        <div class="sl1">
          <div class="left">
            <span>永续</span>
            <div>
              <img src="@/assets/rxx.png" alt />
            </div>
          </div>
          <div class="right jz" style="text-align:right">
            <span class="ll1" style="font-weight: bold!important;">22.22</span>
            <span class="ll2">USDT</span>
          </div>
        </div>
        <div class="sl2">
          <span class="g_color">算力周期</span>
          <span style="text-align:right" class="ll2 jz g_color">单价&nbsp;≈&nbsp;¥&nbsp;123</span>
        </div>
        <div class="sl3">
          <span class="jj1">
            <span style="font-size:10px;padding-right:2px">¥</span>0.38
          </span>
          <span class="jj2">33%</span>
          <span class="jj3"> <span style="font-size:10px;padding-right:2px">¥</span>33</span>
          <span class="tt jj4" style="text-align:right">
            434
            <span style="font-size:10px">天</span>
          </span>
        </div>
        <div class="sl4">
          <span class="g_color jj1">电费/度</span>
          <span class="g_color jj2">管理费</span>
          <span class="g_color jj3">运维费/度</span>
          <span class="tt jz g_color jj4" style="text-align:right">静态回本天数</span>
        </div>
        <div class="sl5">
          <div class="left">
            <span></span>
          </div>
          <div class="right jz" style="text-align:right">已售：30.62%</div>
        </div>
        <div class="sl6">BTC-S15云算力&nbsp;即买即挖</div>
      </div>
    </div>
    <div style="height:1.333333rem;background: transparent"></div>
    <Tabbar :idx="0" />
  </div>
</template>

<script>
// @ is an alias to /src
import Tabbar from "@/views/Tabbar.vue";

export default {
  name: "index",
  components: {
    Tabbar
  },
  data() {
    return {
      isshow: false,
      items: [],
      itemss: [],
      artical: []
    };
  },

  created: function() {},
  mounted() {
    let sl_block = document.querySelector(".sl_block");
    sl_block.style.marginTop = "-1.1rem";
  },
  methods: {
    showLj() {
      this.isshow = !this.isshow;
    },
    cancel() {
      this.isshow = false;
    },
    logout() {
      this.$router.push('/')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.xt{
  width: .4rem;
  height: .4rem;
  margin-right: .2rem;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .8s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.jz {
  width: 25%;
  text-align: left;
}
.jj1,.jj2{
  width: 20%;
}
.jj3,.jj4{
  width: 30%;
}
.jj1,.jj2,.jj3{
  text-align: left;
}
.mask {
  background-color: transparent;
  opacity: 0.4;
  position: fixed;
  width: 100%;
  height: 100%;
}
.dian {
  width: 0.586667rem;
  height: 0.213333rem;
}
.s_list {
  position: absolute;
  left: .2rem;
  width: 2.9rem;
  border-radius: .166667rem;
  background: #000;
  color: #fff;
  font-size: 0.4rem;
  transform: translateX(-80%);
  .f-flex();
  flex-direction: column;
  top: 0.84rem;
  .s_block {
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
    .f-flex();
  }
}
.s_list:after {
  content: "";
  position: absolute;
  bottom: 100%;
  right: 8px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  margin-bottom: -8px;
  border-bottom-width: 15px;
  border-bottom-color: currentColor;
  color: #000;
}
.index {
  .head {
    color: #fefeff;
    height: 5.146667rem;
    width: 100%;
    background: url(../../assets/b_blue.jpg) no-repeat;
    background-size: cover;
  }
  .h-head {
    padding: 0.62rem 0.346667rem 0.626667rem;
    color: #fefeff;
    .f-flex();
    justify-content: space-between;
    .left {
      .f-flex();
      font-size: 0.48rem;
      img {
        width: 0.293333rem;
        height: 0.48rem;
        margin-right: 0.266667rem;
      }
    }
    .right {
      font-size: 0.48rem;
      position: relative;
    }
  }
  .h-mid {
    .f-flex();
    justify-content: space-between;
    margin-left: 0.986667rem;
    margin-bottom: 0.4rem;
    margin-top: .2rem;
    p {
      font-size: 0.64rem;
      letter-spacing: 0.106667rem;
      .bts1 {
        margin-right: 0.266667rem;
      }
    }
  }
  .my_income {
    a {
      color: #fff;
    }
    .f-flex();
    justify-content: center;
    width: 1.706667rem;
    height: 0.693333rem;
    background: url(../../assets/b_red.png) no-repeat;
    background-size: cover;
    img {
      width: 0.186667rem;
      height: 0.293333rem;
    }
  }
  .h_bottom {
    margin-left: 0.546667rem;
    .f-flex();
    .b_list {
      .f-flex();
      .xiaoyuan {
        width: 0.32rem;
        height: 0.32rem;
        background: #fff;
        border-radius: 0.32rem;
        margin-left: 0.346667rem;
        margin-right: 0.066667rem;
      }
    }
  }
  .sl_list {
    .sl_block {
      width: 92%;
      // height: 3.413333rem;
      border-radius: .266667rem;
      background-color: #fff;
      margin-left: 4%;
      margin-bottom: 0.266667rem;
      padding-top: .4rem;
      padding-bottom:.4rem;
      position: relative;  
      z-index: 2;    
      .ysy{
        width: 3rem;
        height: auto;
        position: absolute;
        top: .16rem;
        left: 2.4rem;
        opacity: .8;
        z-index: 1;
      }
      .sl1 {
        .f-flex();
        justify-content: space-between;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        padding-bottom: 0.053333rem;
        .left {
          .f-flex();
          span {
            font-size: 0.48rem;
            color: #FF1A1A;
            margin-right: 0.1rem;
            font-weight: bold !important;
          }
          img {
            font-size: 0.293333rem;
            width: 0.8rem;
            height: 0.4rem;
          }
        }
        .right {
          color: #FF1A1A;
          .ll1 {
            font-size: 0.48rem;
            margin-right: 0.106667rem;
          }
          .ll2 {
            font-size: 0.32rem;
          }
        }
      }
      .sl2 {
        .f-flex();
        color: #434343;
        font-size: 0.32rem;
        color: #434343;
        margin-left: 0.4rem;
        margin-bottom: 0.16rem;
        margin-top: 0.106667rem;
        justify-content: space-between;
        margin-right: 0.4rem;
      }
      .sl3 {
        .f-flex();
        justify-content: space-between;
        color: #313131;
        margin-top: 0.163333rem;
        margin-bottom: 0.16rem;
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        font-size: 0.4rem;
        text-align: left;
        // span {
        //  font-weight: 580!important;
        // }
      }
      .sl4 {
        .f-flex();
        justify-content: space-between;
        margin-left: 0.4rem;
        color: #434343;
        margin-bottom: 0.08rem;
        margin-right: 0.4rem;
        span {
          text-align: left;
        }
      }
      .sl5 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        margin-top: 0.266667rem;
        margin-bottom: 0.12rem;
        .f-flex();
        justify-content: space-between;
        .left {
          width: 5.946667rem;
          border-radius: 1rem;
          overflow: hidden;
          height: .106667rem;
          background: #f2f2f2;
          position: relative;
          span {
            position: absolute;
            top: 0;
            left: 0;
            height: .106667rem;
            width: 33%;
            background: #6680DD;
            border-radius: 1rem;
          }
        }
      }
      .sl6 {
        text-align: left;
        margin-left: 0.533333rem;
        color: #8A8A8A;
      }
    }
  }
}
</style>

